<template>
    <div class="weather15" id="weather15"></div>
</template>

<script setup>
import { ref,onMounted} from 'vue'
import * as echarts from 'echarts'
import { getDailyWeather } from '@/api/plant'
import moment from 'moment'

const srUrl = 'https://ftp.cqtancheng.com/files/farming-skin'

const staticImage = {
  icoWeather100: srUrl+'/ico-weather-100.png', // 首页 天气图标100 晴 白天
  icoWeather101: srUrl+'/ico-weather-104.png', // 首页 天气图标101 多云
  icoWeather102: srUrl+'/ico-weather-104.png', // 首页 天气图标102 少云
  icoWeather104: srUrl+'/ico-weather-104.png', // 首页 天气图标104
  icoWeather150: srUrl+'/ico-weather-100.png', // 首页 天气图标150 晴 晚上
  icoWeather151: srUrl+'/ico-weather-104.png', // 首页 天气图标152 多云
  icoWeather152: srUrl+'/ico-weather-104.png', // 首页 天气图标152 少云
  icoWeather153: srUrl+'/ico-weather-153.png', // 首页 天气图标153
  icoWeather300: srUrl+'/ico-weather-300.png', // 首页 天气图标300
  icoWeather301: srUrl+'/ico-weather-301.png', // 首页 天气图标301
  icoWeather302: srUrl+'/ico-weather-302.png', // 首页 天气图标302
  icoWeather305: srUrl+'/ico-weather-305.png', // 首页 天气图标305
  icoWeather306: srUrl+'/ico-weather-306.png', // 首页 天气图标306
  icoWeather307: srUrl+'/ico-weather-307.png', // 首页 天气图标307
  icoWeather311: srUrl+'/ico-weather-311.png', // 首页 天气图标311
  icoWeather313: srUrl+'/ico-weather-313.png', // 首页 天气图标313 冻雨
  icoWeather400: srUrl+'/ico-weather-400.png', // 首页 天气图标400 小雪
  icoWeather401: srUrl+'/ico-weather-401.png', // 首页 天气图标401 中雪
  icoWeather403: srUrl+'/ico-weather-403.png', // 首页 天气图标403 中雪
  icoWeather404: srUrl+'/ico-weather-404.png', // 首页 天气图标404 雨夹雪
  icoWeather406: srUrl+'/ico-weather-406.png', // 首页 天气图标406 阵雨夹雪
  icoWeather500: srUrl+'/ico-weather-500.png', // 首页 天气图标500 薄雾
  icoWeather501: srUrl+'/ico-weather-501.png', // 首页 天气图标501 雾
  icoWeather508: srUrl+'/ico-weather-508.png', // 首页 天气图标508
}
const props = defineProps({
  item:{
    type:Object,
    default:{}
  }
})
onMounted(()=>{
  get_weather_15_day(`${props.item.locationLongitude},${props.item.locationLatitude}`)
})
const setChart = (w) => {
    let weather15 = document.getElementById('weather15')
    let weather15Chart = echarts.init(weather15)
    let tempOption1 = {
        tooltip: {
            trigger: 'axis'
        },
        grid: [
            {
                top: "120",
                bottom: "20",
                right: "50",
                left: "50",
                height: "25%"
            },
            {
                top: "300",
                bottom: "20",
                right: "50",
                left: "50",
                height: "20%"
            }
        ],
        dataZoom: [
          {
            type: 'slider',
            startValue: 0,
            endValue: 7,
            height: 20,
            xAxisIndex: [0,1,2,3,4,5,6,7],
            maxValueSpan: 6,
            minValueSpan: 6
          }
        ],
        yAxis: [
            {
                type: 'value',
                gridIndex: 0,
                name: '/°C',
                splitNumber: 5,
                nameGap: 25,
                max: w.wwdMax,
                min: w.wwdMin,
                interval: 5,
                nameTextStyle: {
                    padding:[0,30,0,0]
                }
            },
            {
                type: 'value',
                gridIndex: 1,
                name: '/%',
                splitNumber: 5,
                nameGap: 25,
                interval: 25,
                max: 100,
                min: 0,
                nameTextStyle: {
                    padding:[0,30,-5,0]
                }
            }
        ],
        xAxis: [
            {
                type: "category",
                boundaryGap: true,
                gridIndex: 1,
                data: w.weeks,
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "top",
                offset: 80,
                data: w.weeks,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "top",
                offset: 55,
                data: w.dates,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "top",
                offset: 0,
                data: w.textDays,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "top",
                offset: 55,
                data: w.dates,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "top",
                offset: 20,
                data: w.wicon,
                gridIndex: 0,
                axisLabel: {
                    formatter: (value, index) => {
                        return '{' + value + '| }\n{b|' + value + '}'
                    },
                    rich: {
                        ...getWeatherIcon(w.wico, w.wicon),
                        b: {
                            fontSize: 12,
                            lineHeight: 0,
                            height: 20,
                            color: 'transparent'
                        }
                    }
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "bottom",
                offset: 10,
                data: w.windDir,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                type: "category",
                boundaryGap: true,
                position: "bottom",
                offset: 30,
                axisLabel: {
                    formatter: '{value}hpa',
                    color: '#999', fontSize: '12px'
                },
                data: w.pressure,
                gridIndex: 0,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            
        ],
        series: [
            {
                name: '最高气温',
                type: 'line',
                data: w.tempMaxs,
                symbol: 'circle',
                symbolSize: 6,
                xAxisIndex: 1,
                yAxisIndex: 0,
                smooth: true,
                itemStyle: {
                    color: "#ee8535"
                },
            },
            {
                name: '最低气温',
                type: 'line',
                data: w.tempMins,
                symbol: 'circle',
                symbolSize: 6,
                xAxisIndex: 1,
                yAxisIndex: 0,
                smooth: true,
                itemStyle: {
                    color: "#f8cdac"
                },
            },
            {
                name: '湿度',
                type: 'line',
                data: w.humidity,
                symbol: 'circle',
                symbolSize: 6,
                xAxisIndex: 0,
                yAxisIndex: 1,
                smooth: true,
                itemStyle: {
                    color: "#7ddfd7"
                },
            },
        ]
    }

    let tempOption = {
      grid: [
        {
            show: false,
            top: "120",
            bottom: "90",
            right: "50",
            left: "50",
            height: "30%"
        },
        {
            top: "240",
            bottom: "90",
            right: "50",
            left: "50",
            width: "100%",
            height: "30%"
        }
      ],
    //   dataZoom: [
    //     {
    //       type: 'inside',
    //       startValue: 0,
    //       endValue: 7,
    //       yAxisIndex: 1,
    //       xAxisIndex: [0,1,2,3,4]
    //     }
    //   ],
      yAxis: [
        {
          type: 'value',
          name: '/°C',
          splitNumber: 5,
          nameGap: 25,
          max: w.wwdMax,
          min: w.wwdMin,
          interval: 5,
          gridIndex: 0,
          nameTextStyle: {
            padding:[0,30,0,0]
          }
        },
        {
          type: 'value',
          name: '/%',
          splitNumber: 5,
          nameGap: 25,
          gridIndex: 1,
          nameTextStyle: {
            padding:[0,0,0,30]
          }
        }
      ],
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          position: "top",
          offset: 80,
          data: w.weeks,
          gridIndex: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "top",
          offset: 55,
          data: w.dates,
          gridIndex: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "top",
          offset: 20,
          data: w.wicon,
          gridIndex: 0,
          axisLabel: {
            formatter: (value, index) => {
              return '{' + value + '| }\n{b|' + value + '}'
            },
            rich: {
              ...getWeatherIcon(w.wico, w.wicon),
              b: {
                fontSize: 12,
                lineHeight: 0,
                height: 20,
                color: 'transparent'
              }
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "bottom",
          offset: 10,
          data: w.windDir,
          gridIndex: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "category",
          boundaryGap: true,
          position: "bottom",
          offset: 30,
          axisLabel: {
            formatter: '{value}hpa',
            color: '#999', fontSize: '12px'
          },
          data: w.pressure,
          gridIndex: 0,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        {
          type: "value",
          boundaryGap: true,
          gridIndex: 1,
        },
      ],
      series: [
        {
          name: '最高气温',
          type: 'line',
          data: w.tempMaxs,
          symbol: 'circle',
          symbolSize: 6,
          smooth: true,
          xAxisIndex: 0,
          yAxisIndex: 0,
          itemStyle: {
            color: "#ee8535"
          },
        },
        {
          name: '最低气温',
          type: 'line',
          data: w.tempMins,
          symbol: 'circle',
          symbolSize: 6,
          xAxisIndex: 0,
          yAxisIndex: 0,
          smooth: true,
          itemStyle: {
            color: "#f8cdac"
          }
        },
        {
          name: '湿度',
          type: 'line',
          data: w.humidity,
          symbol: 'circle',
          symbolSize: 6,
          yAxisIndex: 1,
          xAxisIndex: 6,
          smooth: true,
          itemStyle: {
            color: "#f8cdac"
          }
        },
      ]
    }
    weather15Chart.clear()
    weather15Chart.setOption(tempOption1)
}

const get_weather_15_day = async (loc) => {
    let dt = process.env.NODE_ENV=='development'?'D7':'D15'
    const res = await getDailyWeather(dt, loc)
    let w = {
        weeks: [],
        dates: [],
        textDays: [],
        pressure: [],
        tempMaxs: [],
        tempMins: [],
        humidity: [],
        windDir: [],
        wico: [],
        wicon: [],
    }
    if( res.daily && res.daily.length > 0 ){
        res.daily.forEach(d => {
            w.weeks.push( getWeekName(moment(d.fxDate).day()) )
            w.dates.push( moment(d.fxDate).format('MM月DD日') )
            w.textDays.push( d.textDay )
            w.pressure.push( d.pressure )
            w.tempMaxs.push( d.tempMax )
            w.tempMins.push( d.tempMin )
            w.humidity.push( d.humidity )
            w.windDir.push( d.windDirDay+d.windScaleDay+'级' )
            w.wico.push(staticImage['icoWeather'+d.iconDay])
            w.wicon.push(d.iconDay)
        })
    }
    w.humidityHighest = Math.ceil(Math.max(...w.humidity) + 5)
    w.humidityMinimum = Math.floor(Math.min(...w.humidity) - 5)
    w.wwdMax = Math.ceil(Math.max(...w.tempMaxs) + 5)
    w.wwdMin = Math.floor(Math.min(...w.tempMins) - 5)
    console.log('w: ', w)
    setChart(w)
}

const getWeekName = (num) => {
    let n = '星期日'
    if( num == 0 ){
        n = '星期日'
    }
    if( num == 1 ){
        n = '星期一'
    }
    if( num == 2 ){
        n = '星期二'
    }
    if( num == 3 ){
        n = '星期三'
    }
    if( num == 4 ){
        n = '星期四'
    }
    if( num == 5 ){
        n = '星期五'
    }
    if( num == 6 ){
        n = '星期六'
    }
    return n
}

const getWeatherIcon = (list, list2) => {
    let obj = {}
    list.forEach((i,index)=>{
        obj[list2[index]] = {
            backgroundColor: {
                image: i
            },
            height: 28,
            width: 28,
        }
    })
    return obj
}

defineExpose({ get_weather_15_day })
</script>

<style lang="scss">
.weather15 {
  height: 450px;
}
</style>
